<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 方式一:子父组件传参 -->
      <!-- 方式二:子组件通过$slots自行判断 -->
      <page-tool :show-before="false">
        <el-button slot="after" type="primary" size="small" @click="onShowDialog()">新增权限</el-button>
      </page-tool>
      <el-table :data="list" border rpw-key="id">
        <el-table-column
          laber="名称"
          prop="name"
          align="center"
        >
        </el-table-column>
        <el-table-column
          laber="标识"
          prop="code"
          align="center"
        >
        </el-table-column>
        <el-table-column
          laber="描述"
          prop="description"
          align="center"
        >
        </el-table-column>
        <el-table-column laber="操作" prop="" align="center">
          <template v-slot="{row}">
            <el-button type="text" @click="onEdit(row.id)">编辑</el-button>
            <el-button type="text" @click="onShowDialog({pid:row.id, type:row.type+1})">添加</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 清空数据-通过v-if -->
    <add-perm v-if="showDialog" ref="addPermRef" title="新增权限" :visible="showDialog" @close="showDialog = false" @click="onDel(row.id)">
    </add-perm>
  </div>
</template>

<script>
import { translateListToTree } from '@/utils'
import { delPermission, getPermissionDetail, getPermissionList } from '@/api/permisson.js'
import AddPerm from './components/add-perm.vue'
export default {
  name: 'Permission',
  components: {
    AddPerm
  },
  props: {},
  data() {
    return {
      list: [],
      showDialog: false
      // node: {}
    }
  },
  created() {
    this.getPermissionList()
  },
  mounted() {},
  methods: {
    // async onShowAsignPermDialog(id) {
    //   this.showAsignPermDialog = true
    //   this.permIds = (await getRoleById(id)).permIds
    //   this.$refs.permRef.setCheckedKeys(this.permIds)
    //   this.roleId = id
    // },
    // async asignPerm() {
    //   const ids = this.$refs.permRef.getCheckedKeys()
    //   await asignPerm({
    //     id: this.roleId,
    //     permIds: ids
    //   })
    //   this.showAsignPermDialog = false
    //   this.$message.success('操作成功')
    // },
    async onEdit(id) {
      this.showDialog = true
      await this.$nextTick()
      this.$refs.addPermRef.form = await getPermissionDetail(id)
    },
    onShowDialog(node) {
      this.showDialog = true
      this.$nextTick(() => {
        Object.assign(this.$refs.addPermRef.form, node)
      })
    },
    onDel(id) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '删除',
        type: 'warning'
      }).then(async action => {
        await delPermission(id)
        this.$message.success('操作成功')
        this.getPermissionList()
      }).catch(() => {

      })
    },
    async getPermissionList() {
      this.list = translateListToTree(await getPermissionList(), '0')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
